import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import {
  Input,
  Button
} from 'react-bootstrap';

import * as Shell from '../common/Shell';
import * as Util from '../common/Util';
import Notify from '../common/Notification';
import * as TicketActions from '../actions/TicketActions';
import * as UserActions from '../actions/UserActions';
import * as LoginActions from '../actions/LoginActions';

import Container from '../components/Container';

class BindApp extends React.Component {

  constructor () {
    super();  
  }

  handleSubmitClick(){
    let account = this.refs.account.getValue();
    let password = this.refs.password.getValue();
    let ticket = this.refs.ticket.getValue();

    if(!Util.accountValidate(account)){
      Notify.makeNotify("资金账号格式不正确");
      return;
    }

    if(!Util.passwordValidate(password)){
      Notify.makeNotify("密码格式不正确");
      return;
    }

    if(!Util.ticketValidate(ticket)){
      Notify.makeNotify("验证码格式不正确");
      return;
    }
    password = Util.RSAEncrypt(password);

    this.props.loginAction.bind({account, password, ticket});
  }

  componentDidMount(){
    this.props.ticketAction.fetchImgTicket();
  }

  refreshImgTicket(){
    this.props.ticketAction.fetchImgTicket();
  }

  renderImgTicket(){
    let { ticket } = this.props;
    if (ticket && ticket.data && ticket.data.length > 0) {
      let imgData = `data:image/png;base64,${ticket.data}`;
      return (
        <a href="javascript:void(0);" onClick={ this.refreshImgTicket.bind(this) }>
          <img src={ imgData } className=""/>  
        </a>
      )
    }
    return null;
  }

  componentDidUpdate(){
    let { bind_status = 0, message = "" } = this.props.login;

    this.props.login.bind_status = 0;

    if(bind_status === -1){
      Notify.makeNotify(message);
      //刷新验证码
      this.refreshImgTicket();
    }else if(bind_status === 1){
      //更新用户认证状态
      this.props.userAction.updateUserInfo("isauth", "1"); 
    }

    let { isauth } = this.props.user;
    if(isauth === "1"){
      this.props.history.pushState(null, "/User");
    }
  }

  onAccountClick(event){
    Shell.callShellMethod("callOpenAccountPlugin");
    event.preventDefault();
  }

  render() {

    let imgTicket = this.renderImgTicket();

    return (
      <Container  
        isGoBack={true} 
        isHeader={true} 
        isFooter={false}
        headerTitle={"用户认证"}>

          <div id="bind-bg">
              <h1 className="text-primary">绑定华西证券账户</h1>
              <p className="text-primary">立获奖励积分，充值积分翻倍</p>
          </div>
        
          <div id="account-panel" className="account-bind">

              <form className="form-horizontal">
                  <div className="form-element">
                      <Input type="tel"
                      ref = "account"
                      defaultValue = ""
                      placeholder = "请输入资金账号"
                      wrapperClassName="col-xs-12"
                      maxLength = "12"
                      addonBefore="资金账号"/>

                      <div className="devider"></div>

                      <Input type="password"
                      ref = "password"
                      defaultValue=""
                      placeholder = "请输入交易密码"
                      wrapperClassName="col-xs-12"
                      maxLength="6"
                      addonBefore="交易密码"/>

                      <div className="devider"></div>

                      <Input type="tel"
                      ref = "ticket"
                      defaultValue=""
                      placeholder = "请输入验证码"
                      wrapperClassName="col-xs-12"
                      maxLength="6"
                      addonAfter = { imgTicket }
                      addonBefore="验&nbsp;&nbsp;证&nbsp;&nbsp;码"/>

                      <div className="devider"></div>
                  </div>
                  <div className="text-center padding-left-lg padding-right-lg">
                      <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>
                        安全认证
                      </Button>
                  </div>
                  <div className="blank40"></div>
                  <div className="text-center">
                    <a className="border-bottom" href="javascript:void(0);" onClick={this.onAccountClick.bind(this)}>
                        没有证券账号，点此马上手机开户
                    </a>
                  </div>
                  <div className="blank20"></div>
              </form>
          </div>
                
      </Container>
    );
  }
}

export default connect(state => ({
    login: state.login,
    user: state.user,
    ticket: state.ticket
}), dispatch => ({
    loginAction: bindActionCreators(LoginActions, dispatch),
    userAction: bindActionCreators(UserActions, dispatch),
    ticketAction: bindActionCreators(TicketActions, dispatch)
}))(BindApp);
